<!-- 暗黑模式适配 -->
<template>
  <el-icon @click="toggleTheme">
    <app-icon
      v-if="isDark"
      icon="ep:moon-night"
    />
    <app-icon
      v-else
      icon="ep:sunrise"
    />
  </el-icon>
</template>
<script setup>
import { useDark, useToggle } from '@vueuse/core'
import useThemeStore from '@/store/theme'

const isDark = useDark()
const toggleDark = useToggle(isDark)

const themeStore = useThemeStore()

const toggleTheme = (event) => {
  if (!('startViewTransition' in document)) {
    toggleDark()
    themeStore.setScheme(isDark.value)
    return
  }
  const x = event.clientX
  const y = event.clientY
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  )

  const transition = document.startViewTransition(() => {
    toggleDark()
    themeStore.setScheme(isDark.value)
  })

  transition.ready.then(() => {
    const clipPath = [
        `circle(0px at ${x}px ${y}px)`,
        `circle(${endRadius}px at ${x}px ${y}px)`
    ]
    document.documentElement.animate(
      {
        clipPath: isDark.value ? [...clipPath].reverse() : clipPath
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: isDark.value
          ? '::view-transition-old(root)'
          : '::view-transition-new(root)'
      }
    )
  })
}

</script>

<style scoped lang='scss'>

</style>
